/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import { hashHistory } from 'react-router';
import Confirm from "../../common/Confirm"
import "./Limit.css";
import {Alert } from 'antd';
import FindPersonnelListMutation from "./mutation/FindPersonnelListMutation"
import Relay from "react-relay";
import Limit_item from "./Limit_item"
import DeleteRoleMutation from "./mutation/DeleteRoleMutation"
import GetRolesMutation from "./mutation/GetRolesMutation"

import {_Table,_Icon} from 'ANT_DE';
const Table = _Table,
      Icon = _Icon

import {Button,Input,Modal} from 'fly';
import {message} from 'antd';

import ReactDOM from 'react-dom';


const Search = Input.Search;

const columns = [{
    title: '职务名称',
    dataIndex: 'name',
    width: 150,
}, {
    title: '人数',
    dataIndex: 'age',
    width: 150,
}, {
    title: '人员',
    dataIndex: 'address',
},{
    title:"编辑",
    dataIndex:"editor",
    width:60
}, {
    title:"删除",
    dataIndex:"remove",
    width:60
}
];

/*删除弹框*/
class Delete extends React.Component{
    constructor(props){
        super(props);
        this.state={
            delete:false,
            roid:'',
            enid:'',
        }
        this.style={
            alert:{
                width:"300px",
                height:"160px",
                margin:"0 auto"
            }
        }
        this.enterpriseId = sessionStorage.getItem('enterpriseId');
        this.permissionId = sessionStorage.getItem('permissionId');

    }
    handleOk = (e) => {
        Relay.Store.commitUpdate(
            new DeleteRoleMutation({
                rid:this.state.roid,
                enid:this.state.enid
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let errorcode = response.delRole.delRole.errorCode;
                    if(errorcode==0){
                        this.props.getpersion();
                    }
                }
            }
        )
        this.setState({
            delete: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            delete: false,
        });
    }
    render(){
        return (
            <Modal id="delete" visible={this.state.delete} title="是否删除" onOk={this.handleOk} onCancel={this.handleCancel} style={{width:"440px",height:"270px",display:"block"}}>
                <div style={{textAlign:"center"}}>
                    <Icon type="exclamation-circle" style={{color:"#fc880c",fontSize:32,verticalAlign:"middle"}}/>
                    <span style={{marginLeft:20,position:"relative",fontSize:15}}>
                        确定删除该职务吗？
                    </span>
                </div>
            </Modal>
        )
    }
}
/*编辑组件*/
class Edit extends React.Component{
    constructor(props){
        super(props);
        this.state={
            edit:false
        }
        this.style={

        }
    }
    handleOk = (e) => {
        this.setState({
            edit: false,
            pnum:0
        });
    }
    handleCancel = (e) => {
        this.setState({
            edit: false,
        });
    }
    render(){
        return (
            <Modal  visible={this.state.edit} onOk={this.handleOk} onCancel={this.handleCancel} style={{width:"440px",height:"270px",display:"block"}}>
                <span className="limit_duty_tp">财务{this.state.pnum}人</span>
                <textarea style={{rows:5,width:360,height:115,resize:"none",outline:"none",marginTop:30,marginLeft:30,padding:10}}/>
            </Modal>
        )
    }
}

/*导出组件*/
export default class Limit extends React.Component{
    constructor(props){
        super(props);
        this.style={
            confirm:{
                width: '96px',
                height: '27px',
                backgroundColor: "#36b3b3",
                fontSize:14,
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius:"5px",
            }
        };
        this.state={
            arrgroup:[],
            tableIsLoading:true,
            value:""
        }
        this.arrgroup =[];
        this.enterpriseId = sessionStorage.getItem('enterpriseId');
        this.permissionId = sessionStorage.getItem('permissionId');
        this.testChange = this.testChange.bind(this);

        this.data=[]
    }

    componentWillMount(){
        this.getpersion();
    }

    getpersion(){
        this.arrgroup = [];
        Relay.Store.commitUpdate(
            new GetRolesMutation({
                isAll:'zhaobin',
                enid:this.enterpriseId
            }),
            {
                onFailure:()=>{},
                onSuccess:(response)=>{
                    this.data = [];
                    let errorcode = response.getRoles.getRoles.errorCode;
                    if(errorcode == 0){
                       let roles = response.getRoles.getRoles.roles || [];
                        this.arrgroup = roles;
                        for (let i = 0; i < roles.length; i++) {
                            // 除去－1
                            if(roles[i].roleid.enid !== "-1"){
                                // roles[i].roleid.enid !== "0"
                                const _icon = roles[i].roleid.enid == "0" ? <Icon className="limit_icon--cancel___dis" type="edit" style={{fontSize:18}}/> :
                                    <Icon type="edit" className="cur_icon limit_icon--cancel" onClick={this.edit.bind(this,roles[i].roleid.rid)}/>;
                                const _2icon = roles[i].roleid.enid == "0" ?  <Icon type="delete" style={{fontSize:18,color:"#b4b4b4"}} /> : <Icon type="delete" className="cur_icon" onClick={this.deletz.bind(this,roles[i].roleid.rid,roles[i].roleid.enid)}
                                />;

                                this.data.push({
                                    key: i,
                                    name: roles[i].name,
                                    age: roles[i].used ? roles[i].used.length : "",
                                    address:roles[i].users,
                                    editor: _icon,
                                    remove: _2icon
                                });
                            }
                        }
                        this.setState({
                            arrgroup:this.arrgroup,
                            tableIsLoading:false
                        })
                    }
                }
            },
        );
    }

    /*编辑*/
    edit(id){
        hashHistory.push('/editLimit/'+id)
    }
    /*删除*/
    deletz(roid,enid){

        this.refs.delete.setState({
            delete:true,
            roid:roid,
            enid:enid
        });
        this.getpersion();
    }

    /*员工列表*/
    addList(){
        return this.state.arrgroup.map((item,index)=>{
           return(
               <Limit_item item={item} index={index} key={index+'limititem'} edit={this.edit.bind(this)} deletz={this.deletz.bind(this)}/>
           );
        })
    }

    /*新增职务*/
    addDuty(){
        hashHistory.push('/editLimit')
    }

    testChange(value,e){
        this.setState({
            value
        })
    }


    render(){
        const {tableIsLoading,value} = this.state;

        return (
            <div className="limit clear">
                <div className="limit_duty_box">
                    {/*<Confirm style={this.style.confirm} tcontext={''} touch={}/>*/}

                    <Button onClick={this.addDuty.bind(this)} >
                        新增职务
                    </Button>

                    <div style={{marginTop:20}}>
                        <Table className="limit_current--table" loading={tableIsLoading} bordered pagination={false} columns={columns} dataSource={this.data}  />
                    </div>
                </div>

                <Delete ref={'delete'} getpersion={this.getpersion.bind(this)} />
                <Edit ref={"edit"} />
            </div>
        )
    }
}